<template>
   
  <Header></Header>
   
  <el-row :gutter="10">
    <div class="aside">
      <Aside ></Aside>
    </div>
   
   <el-col :span="20"><div class="grid-content ep-bg-purple" >
    <!-- <transition name="fade">
    
     </transition> -->
 <router-view></router-view>
     <!-- <router-view v-slot="{ Component }">
        <transition name="fade">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view> -->

   </div></el-col>
 </el-row>
 

  


</template> 

<script setup lang="ts">
import Header from '../components/Header.vue'
import Aside from '../components/Aside.vue'

</script>

<style lang="less" scoped>

.el-row {
 margin-bottom: 20px;
}
.el-row:last-child {
 margin-bottom: 0;
}
.el-col {
 border-radius: 4px;
}

.grid-content {
  margin-top: 10px;
 border-radius: 4px;
 min-height: 36px;
 height: 630px;
 background-color: rgb(250, 247, 247);
}

.aside{
  //  position: relative;
  //  top:100px;
  float: left;
}


//页面过渡动画
// .fade-enter-from,
// .fade-leave-to {
//   /*定义进入开始和离开结束的透明度为0*/
//   opacity: 0;
// }
// .fade-leave-to {
//   transform: translateX(20px);
// }
// .fade-enter-to {
//   transform: translateX(-20px);
// }
// .fade-enter-to,
// .fade-leave-from {
//   /*定义进入结束和离开开始的透明度为1*/
//   opacity: 1;
// }
// .fade-leave-active,.fade-enter-active {
//   transition: all 0s ease-out;
// }


</style>